<template>
    <el-scrollbar>
        <el-menu :default-openeds="['1', '2','4']">
            <h3 style="color: #409EFF;"><el-icon>
                    <setting />
                </el-icon>学生管理系统</h3>
            <el-submenu index="1">
                <template #title>
                    <el-icon>
                        <User />
                    </el-icon><span style="color: #409EFF; font-size: 19px;">学生信息管理</span>
                </template>
                <el-menu-item index="1-1" @click="gotoStudentTable">查看学生信息</el-menu-item>
                <el-menu-item index="1-2" @click="gotoAddStudentTable">添加学生信息</el-menu-item>
                <el-menu-item index="1-3" @click="gotoQueryStudentTable">查询学生信息</el-menu-item>
            </el-submenu>
            <el-submenu index="2">
                <template #title>
                    <el-icon>
                        <User />
                    </el-icon><span style="color: #409EFF;  font-size: 19px;">教师信息管理</span>
                </template>
                <el-menu-item index="2-1" @click="gotoTeacherTable">查看教师信息</el-menu-item>
                <!-- <el-menu-item index="2-2">添加教师信息</el-menu-item> -->
                <el-menu-item index="2-3"  @click="gotoQueryTeacherTable">查询教师信息</el-menu-item>
            </el-submenu>
            <!-- <el-submenu index="3">
                <template #title>
                    <el-icon>
                        <User />
                    </el-icon><span style="color: #409EFF; font-size: 19px;">班级信息管理</span>
                </template>
                <el-menu-item index="3-1">Option 1</el-menu-item>
                <el-menu-item index="3-2">Option 2</el-menu-item>
                <el-menu-item index="3-3">Option 3</el-menu-item>
            </el-submenu> -->
            <el-submenu index="4">
                <template #title>
                    <el-icon>
                        <Cpu />
                    </el-icon><span style="color: #409EFF; font-size: 19px;">个人中心</span>
                </template>
                <el-menu-item index="4-1" @click="gotoUpdatePasswordFrom">修改密码</el-menu-item>
                <el-menu-item index="4-2" @click="gotoUpdateUserForm">修改用户信息</el-menu-item>
            </el-submenu>
        </el-menu>
    </el-scrollbar>
</template>
    


<script>
import {
    Document,
    Menu as IconMenu,
    Location,
    Setting,
    User
} from '@element-plus/icons-vue'
import { ElIcon } from 'element-plus';
export default{
    props:["goto"],
    methods:{
        gotoStudentTable(){
            let goesto="StudentTable";
            this.$emit("changeComponent",goesto);
        },
        gotoAddStudentTable(){
            let goesto="AddStudentTable";
            this.$emit("changeComponent",goesto);
        },
        gotoQueryStudentTable(){
            let goesto="QueryStudentTable";
            this.$emit("changeComponent",goesto);
        },
        gotoTeacherTable(){
            let goesto="TeacherTable";
            this.$emit("changeComponent",goesto);
        },
        gotoQueryTeacherTable(){
            let goesto="QueryTeacherTable";
            this.$emit("changeComponent",goesto);
        },
        gotoUpdateUserForm(){
            let goesto="UpdateUserForm";
            this.$emit("changeComponent",goesto);
        },
        gotoUpdatePasswordFrom(){
            let goesto="UpdatePasswordForm";
            this.$emit("changeComponent",goesto);
        }
    }
}

</script>
<style scoped>
</style>